<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--    router-link-->
<!--    <span onclick="routerChange('/')">首页</span>-->
<!--    <span onclick="routerChange('/about')">关于</span>-->
    <a onclick="routerChange('/')">首页</a>
    <a onclick="routerChange('/about')">关于</a>

    <!--    router-view-->
    <div id="view"></div>
<script>
    //hash模式路由原理（监听浏览器的hashchange方法，拿到路径渲染对应的组件）
    // document.addEventListener("DOMContentLoaded",()=>{
    //     view.innerHTML = location.hash.slice(1);
    // });
    // window.addEventListener("hashchange",()=>{
    //     view.innerHTML = location.hash.slice(1);
    // });
    //
    // function routerChange(pathname) {
    //     location.hash = pathname;
    // }

    //history模式  h5
    function routerChange(pathname) {
        // console.log(pathname);
        history.pushState(null,null,pathname);
        view.innerHTML = location.pathname;
    }

    window.addEventListener("popstate", () => {
        view.innerHTML = location.pathname;
    })

    //hash histoty的区别
    // # hash url会更改、浏览器可以前进和后退、浏览器不刷新
    // 不会与服务端交流

    // 无 #
    // history会和服务端交流

</script>
</body>
</html>